//zoom button
const zoomButton = document.querySelector('.zoomButton');
function buttonHoverAnim(buttonDOM) {
    buttonDOM.addEventListener('mouseenter', function () {
        this.children[0].children[0].classList.add('icon-path')
    })
    buttonDOM.addEventListener('mouseleave', function () {
        this.children[0].children[0].classList.remove('icon-path')
    })
}
buttonHoverAnim(zoomButton)
let zoomInflag = false;

zoomButton.addEventListener('click', function () {
    this.innerHTML = `
    <svg t="1712067202448" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5192" width="200" height="200">
                    <path class="" stroke="#000" style="fill: white;"
                        d="M789.333333 64a170.666667 170.666667 0 0 1 170.581334 165.333333L960 234.666667v311.466666a8.533333 8.533333 0 0 1-8.533333 8.533334h-46.933334a8.533333 8.533333 0 0 1-8.533333-8.533334V234.666667l-0.106667-4.629334a106.666667 106.666667 0 0 0-101.802666-101.930666L789.333333 128H234.666667l-4.629334 0.106667a106.666667 106.666667 0 0 0-101.930666 101.802666L128 234.666667v554.666666l0.106667 4.629334a106.666667 106.666667 0 0 0 101.802666 101.930666L234.666667 896h311.466666c4.693333 0 8.533333 3.84 8.533334 8.533333v46.933334a8.533333 8.533333 0 0 1-8.533334 8.533333H234.666667a170.666667 170.666667 0 0 1-170.581334-165.333333L64 789.333333V234.666667a170.666667 170.666667 0 0 1 165.333333-170.581334L234.666667 64h554.666666z m85.333334 554.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v170.666667a85.333333 85.333333 0 0 1-85.333333 85.333333h-170.666667a85.333333 85.333333 0 0 1-85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 1 85.333333-85.333333z m0 64h-170.666667l-2.496 0.149333A21.333333 21.333333 0 0 0 682.666667 704v170.666667l0.149333 2.496A21.333333 21.333333 0 0 0 704 896h170.666667l2.496-0.149333A21.333333 21.333333 0 0 0 896 874.666667v-170.666667l-0.149333-2.496A21.333333 21.333333 0 0 0 874.666667 682.666667zM240.149333 194.901333L469.333333 424.064V264.533333c0-4.693333 3.84-8.533333 8.533334-8.533333h46.933333c4.693333 0 8.533333 3.84 8.533333 8.533333V469.333333a64 64 0 0 1-60.245333 63.893334L469.333333 533.333333h-204.8a8.533333 8.533333 0 0 1-8.533333-8.533333v-46.933333c0-4.693333 3.84-8.533333 8.533333-8.533334h159.530667L194.901333 240.149333l45.248-45.248z"
                        fill="#333333" p-id="5193"></path>
                </svg>
    `
    if (zoomInflag) {
        zoomIn()
        this.innerHTML = `
            <svg t="1712067175745" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5041" width="200" height="200">
                    <path class="" stroke="#000" style="fill: white;"
                        d="M789.333333 64a170.666667 170.666667 0 0 1 170.666667 170.666667v311.466666a8.533333 8.533333 0 0 1-8.533333 8.533334h-46.933334a8.533333 8.533333 0 0 1-8.533333-8.533334V234.666667a106.666667 106.666667 0 0 0-102.037333-106.56L789.333333 128H234.666667a106.666667 106.666667 0 0 0-106.56 102.037333L128 234.666667v554.666666a106.666667 106.666667 0 0 0 102.037333 106.56L234.666667 896h311.466666c4.693333 0 8.533333 3.84 8.533334 8.533333v46.933334a8.533333 8.533333 0 0 1-8.533334 8.533333H234.666667a170.666667 170.666667 0 0 1-170.666667-170.666667V234.666667a170.666667 170.666667 0 0 1 170.666667-170.666667h554.666666z m85.333334 554.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v170.666667a85.333333 85.333333 0 0 1-85.333333 85.333333h-170.666667a85.333333 85.333333 0 0 1-85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 1 85.333333-85.333333h170.666667z m0 64h-170.666667a21.333333 21.333333 0 0 0-21.184 18.837333L682.666667 704v170.666667a21.333333 21.333333 0 0 0 18.837333 21.184L704 896h170.666667a21.333333 21.333333 0 0 0 21.184-18.837333L896 874.666667v-170.666667a21.333333 21.333333 0 0 0-18.837333-21.184L874.666667 682.666667zM460.8 192c4.693333 0 8.533333 3.84 8.533333 8.533333v46.933334a8.533333 8.533333 0 0 1-8.533333 8.533333h-159.530667l229.162667 229.184-45.248 45.248L256 301.269333V460.8a8.533333 8.533333 0 0 1-8.533333 8.533333H200.533333a8.533333 8.533333 0 0 1-8.533333-8.533333V256a64 64 0 0 1 60.245333-63.893333L256 192h204.8z"
                        fill="#333333" p-id="5042"></path>
                </svg>
        `
    }
    zoomInflag = !zoomInflag
})


//rain button
const rainButton = document.querySelector('.rainButton');
buttonHoverAnim(rainButton)
rainButton.addEventListener('click', () => {
    if (rainButton.dataset.status === '1') {
        stopRain();
        rainButton.dataset.status = '0'

        rainButton.innerHTML = `
            <svg t="1712132550383" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2314" width="200" height="200">
                    <path class="" stroke="#000" style="fill: white;"
                        d="M256 597.333333C279.466667 597.333333 298.666667 616.533333 298.666667 640 298.666667 663.466667 279.466667 682.666667 256 682.666667 138.24 682.666667 42.666667 587.093333 42.666667 469.333333 42.666667 351.573333 138.24 256 256 256 298.666667 155.733333 396.8 85.333333 512 85.333333 658.346667 85.333333 778.24 198.826667 789.333333 342.613333L810.666667 341.333333C904.96 341.333333 981.333333 417.706667 981.333333 512 981.333333 606.293333 904.96 682.666667 810.666667 682.666667L768 682.666667C744.533333 682.666667 725.333333 663.466667 725.333333 640 725.333333 616.533333 744.533333 597.333333 768 597.333333L810.666667 597.333333C857.6 597.333333 896 558.933333 896 512 896 465.066667 857.6 426.666667 810.666667 426.666667L725.333333 426.666667 725.333333 384C725.333333 266.24 629.76 170.666667 512 170.666667 405.333333 170.666667 317.866667 248.32 301.226667 349.44 287.146667 344.32 271.786667 341.333333 256 341.333333 185.173333 341.333333 128 398.506667 128 469.333333 128 540.16 185.173333 597.333333 256 597.333333M632.746667 668.586667C699.306667 735.146667 699.306667 832 632.746667 899.413333 599.466667 932.693333 554.666667 938.666667 512 938.666667 469.333333 938.666667 424.533333 932.693333 391.253333 899.413333 324.693333 832 324.693333 735.146667 391.253333 668.586667L512 469.333333 632.746667 668.586667M572.16 712.106667 512 608 451.84 712.106667C418.133333 746.666667 418.133333 797.866667 451.84 832 469.333333 850.346667 490.666667 853.333333 512 853.333333 533.333333 853.333333 554.666667 850.346667 572.16 832 605.866667 797.866667 605.866667 746.666667 572.16 712.106667Z"
                        p-id="2315"></path>
                </svg>
        `

        document.body.style.backdropFilter = 'blur(0px)'
        return
    }

    rainButton.dataset.status = '1'
    startRain();

    rainButton.innerHTML = `
        <svg t="1712135877440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2461"
                    width="200" height="200">
                    <path class="" stroke="#000" style="fill: white;"
                        d="M256 810.666667a213.333333 213.333333 0 0 1-213.333333-213.333334 213.333333 213.333333 0 0 1 213.333333-213.333333c42.666667-100.266667 140.8-170.666667 256-170.666667 146.346667 0 266.24 113.493333 277.333333 257.28L810.666667 469.333333a170.666667 170.666667 0 0 1 170.666666 170.666667 170.666667 170.666667 0 0 1-170.666666 170.666667H256m554.666667-256h-85.333334v-42.666667a213.333333 213.333333 0 0 0-213.333333-213.333333c-106.666667 0-194.133333 77.653333-210.773333 178.773333C287.146667 472.32 271.786667 469.333333 256 469.333333a128 128 0 0 0-128 128 128 128 0 0 0 128 128h554.666667a85.333333 85.333333 0 0 0 85.333333-85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
                        fill="" p-id="2462"></path>
                </svg>
    `
    document.body.style.backdropFilter = 'blur(5px)'

})

